<template>
  <div class="about">
    <img v-if="this.manager !== null" class="background" :src="this.manager.background" alt="">
    <img v-if="this.manager !== null" class="avatar" :src="this.manager.headPic" alt="">
    <p v-if="this.manager !== null" class="name">{{ this.manager.name }}</p>
    <p v-else class="name">奇缘</p>
    <p v-if="this.manager !== null" class="desc">{{this.manager.userDesc}}</p>
    <p v-else class="desc">我们不过是茫茫宇宙中的一粒尘埃</p>
    <div class="line"></div>
    <ul class="social">
      <li>
        <div style="float: left;margin-top: 0px" class="desc">社交:</div>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=80999625&site=qq&menu=yes" target="_blank"><img src="../../assets/icon/QQ.png"  alt=""></a>
<!--        <a href="" target="_blank"><img src="../../assets/icon/github.png" alt=""></a>-->
        <a href="https://gitee.com/yu_2017" target="_blank"><img src="../../assets/icon/gitee.png"  alt=""></a>
<!--        <a href="" target="_blank"><img src="../../assets/icon/csdn.png"  alt=""></a>-->
      </li>
    </ul>
    <div class="line"></div>
    <ul class="social">
      <li>
        <div style="float: left;margin-top: 0px" class="desc">加入我们:</div>
        <a href="//qm.qq.com/cgi-bin/qm/qr?k=ZMsMDREfUTS2u5_ejoFB7kbIizRhG5q6&authKey=g7CTfZXE3Nf+RBTsj2ADnsKEKBIltAwnlhhlqZ+5YiFSYc7YvQVxR8udBTSuJ8f6&noverify=0" target="_blank" style="margin-left: -50px;width: 50px; ">
          <img src="../../assets/icon/Qqun.png"  alt="">
          <span style="font-size: 5px">QQ群</span>
        </a>
      </li>
    </ul>
    <!--<h4>技能值</h4>
    <div class="progresses">
      <iv-row :gutter="20">
        <iv-col :span="6">
          <p class="title">Java</p>
        </iv-col>
        <iv-col :span="18">
          <iv-progress status="normal" :hide-info="true" :stroke-width="8" :percent="60" class="bar"></iv-progress>
        </iv-col>
      </iv-row>
      <iv-row :gutter="20">
        <iv-col :span="6">
          <p class="title">Vue</p>
        </iv-col>
        <iv-col :span="18">
          <iv-progress status="wrong" :hide-info="true" :stroke-width="8" :percent="40" class="bar"></iv-progress>
        </iv-col>
      </iv-row>
      <iv-row :gutter="20">
        <iv-col :span="6">
          <p class="title">Go</p>
        </iv-col>
        <iv-col :span="18">
          <iv-progress status="success" :hide-info="true" :stroke-width="8" :percent="10" class="bar"></iv-progress>
        </iv-col>
      </iv-row>
      <iv-row :gutter="20">
        <iv-col :span="6">
          <p class="title">Cloud</p>
        </iv-col>
        <iv-col :span="18">
          <iv-progress status="active" :hide-info="true" :stroke-width="8" :percent="30" class="bar"></iv-progress>
        </iv-col>
      </iv-row>
    </div>-->
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      manager:{},
    }
  },
  mounted: function () {
    this.manager = JSON.parse(sessionStorage.getItem('currentManager'))
    if (this.manager === null){
      //获取默认设置
      this.getDefaults();
    }
  },
  methods:{
    getDefaults(){
      this.$http({
        url: this.$http.adornUrl('/login/defSteup'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.status === 0) {
          this.manager = data.result.manager;
        }
      })
    }
  },
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/theme.styl";

  .about
    position relative
    text-align center
    border 1px solid $color-border
    padding-bottom 20px
    background-color #fff
    img.background
      position absolute
      top 0
      left 0
      right 0
      width 100%
      height 125px
      z-index 1
    img.avatar
      position relative
      margin 75px auto 15px
      width 100px
      height 100px
      border 5px solid $color-gradually-gray-91
      border-radius 50%
      z-index 9
    .name
      font-size 22px
      color $color-typegraphy-title
      line-height 30px
      font-weight 700
    .desc
      font-size 15px
      color $color-secondary-info
      line-height 30px
      font-weight 100
    .social
      text-align center
      padding 0 20px
      margin-top 15px
      > li
        padding 8px
        a
          display inline-block
          width: 44px
          height: 44px
          margin: auto
          img
            width 90%
    .line
      height 1px
      background-color $color-gradually-gray-91
      margin 10px 20px
    h4
      font-size 19px
      margin 30px 0 20px
      font-weight 600
    .progresses
      padding 0 20px
      p.title
        height 38px
        line-height 38px
        text-align right
      .bar
        margin 10px 0
</style>
